<template>
	<div class="container">
		<div class="container_header">宿舍报修</div>
		<div class="content">
			<div>
				<el-form :model="form" label-width="auto" :rules="rules" style="max-width: 600px">
					<el-form-item label="申报人" style="width: 600px">
						<el-input v-model="form.name" disabled />
					</el-form-item>
					<el-form-item label="申报宿舍">
						<el-input v-model="form.region" style="width: 600px" disabled />
					</el-form-item>
					<el-form-item label="联系电话" prop="tel">
						<el-input v-model="form.tel" style="width: 600px" disabled />
					</el-form-item>
					<el-form-item label="申报描述" prop="desc">
						<el-input v-model="form.desc" type="textarea" style="width: 600px" />
					</el-form-item>
					<el-form-item label="申报类型" prop="type">
						<el-radio-group v-model="form.resource" class="ml-4" >
							<el-radio :label="1" size="large">普通报修</el-radio>
							<el-radio :label="2" size="large">紧急报修</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit">提交</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>
<script setup name="count">
import { onMounted, reactive, ref } from "vue";
import { LoginInfo, InsetBao } from "@/api/student/home";
import { ElNotification } from 'element-plus'
import { GlobalStore } from "@/stores";
const globalStore = GlobalStore();
const form = reactive({
	name: "",
	region: "",
	tel: "",
	desc: "",
	resource: 1
});
// 校验规则
const rules = reactive({
	// tel: [{ required: true }],
	desc: [{ required: true }]
	// type: [
	// 	{
	// 		required: true
	// 	}
	// ]
});
// const changeVal = val => {
// 	console.log(form.resource);
// };
// 获取宿舍信息
const buildId = ref('');
const InfoAll = ref({});
const getInfoAll = async () => {
	try {
		const res = await LoginInfo({ id: globalStore.userInfo.id });
		console.log(res, globalStore.userInfo.id)
		buildId.value = res.data.data[0].build_id;
		if (res.data.code === 200) {
			InfoAll.value = res.data.data[0];
			form.name = `${InfoAll?.value?.username}(${InfoAll?.value?.studentcard})`;
			form.region = `${InfoAll?.value.floor}-${InfoAll.value?.room}(${InfoAll?.value.build})`;
			form.tel = InfoAll.value.tel;
		} else {
			ElNotification({
				message: "获取信息失败 ",
				type: "error",
				duration: 3000
			});
		}
	} catch (error) {
		console.log(error);
	}
};
const onSubmit = async () => {
	// console.log(InfoAll.value);
	if (!form.desc || !form.resource) {
		ElNotification({
			message: "报修信息不完整 ",
			type: "error",
			duration: 3000
		});
		return;
	}
	// 插入报修信息
	try {
		// console.log(InfoAll.value)
		const res = await InsetBao({
			roomId:InfoAll.value.room_id,
			content:form.desc,
			type:form.resource,
			studentId:InfoAll.value.student_id,
			build_id:buildId.value,
			state:1,
			room:form.region
		});
		if (res.data.code === 200) {
			ElNotification({
				message: "申请报修成功",
				type: "success",
				duration: 3000
			});
		} else {
			ElNotification({
				message: "申请报修失败",
				type: "error",
				duration: 3000
			});
		}
	} catch (error) {
		console.log(error);
	}
};
onMounted(() => {
	getInfoAll();
});
</script>

<style lang="scss" scoped>
.container {
	.container_header {
		width: 100%;
		height: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 16px;
		font-weight: 600;
	}
	.content {
		width: 93%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
</style>
